<template>
  <div class="fx-pagination-to ml5">
    <span class="mr10">前往</span>
    <fx-input-number width="50" v-model="page" :size="size" :is-btn="false" :min="1" :max="pageTotal"
                     @change="$emit('inputChange',page)"/>
    <span class="ml10">页</span>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType, ref, watch } from 'vue'
import { ComponentSize, componentSizeArr } from '@/base/types'

interface paginationInputProps {
  currentPage: number;
  size: ComponentSize;
  pageTotal: number;
}

export default defineComponent({
  name: 'paginationInput',
  props: {
    currentPage: {
      type: Number as PropType<number>,
      default: 1
    },
    // 大小
    size: {
      type: String as PropType<ComponentSize>,
      default: 'default',
      validator (val: ComponentSize): boolean {
        return componentSizeArr.includes(val)
      }
    },
    pageTotal: {
      type: Number as PropType<number>,
      default: 1
    }
  },
  emits: ['inputChange'],
  setup (props: paginationInputProps) {
    const page = ref<number>(props.currentPage)
    watch(() => props.currentPage, (val: number) => {
      page.value = val
    })

    return {
      page
    }
  }
})
</script>
